<template>
	<view class="persondata">
		<view class="body">
			<view class="avaarea">
				<view class="textavaimg">
					头像
				</view>
				<view class="avaimg">
					<image :src="srcs" class="avaphoto"></image>
				</view>
				<view class="uploadarea">
					<template>

						<u-icon name="arrow-right" color="#2979ff" size="28" @click="getAva"></u-icon>

					</template>
				</view>
			</view>

			<view class="avaarea" @click="showname=true">
				<view class="textava">
					昵称
					<text>{{nickName}}</text>
				</view>



				<view class="iconarea">
					<u-icon name="arrow-right" color="#2979ff" size="28"></u-icon>
				</view>
			</view>

			<view class="avaarea" @click="showgxqm=true">
				<view class="textava">
					个性签名
					<text class="textgxqm">
						{{signature}}
					</text>
				</view>

				<view class="uploadarea">
					<template>
						<!-- <u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1"
							:maxCount="10"> -->
						<u-icon name="arrow-right" color="#2979ff" size="28"></u-icon>
						<!-- </u-upload> -->
					</template>
				</view>
			</view>

			<view class="avaarea" @click="showphone=true">
				<view class="textava">
					联系方式
					<text>
						{{phonenum}}
					</text>
				</view>

				<view class="uploadarea">
					<template>

						<u-icon name="arrow-right" color="#2979ff" size="28"></u-icon>

					</template>
				</view>
			</view>

			<view class="avaarea" @click="showemail=true">
				<view class="textava">
					电子邮箱
					<text>
						{{email}}
					</text>
				</view>

				<view class="uploadarea">
					<template>
						<!-- <u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1"
							:maxCount="10"> -->
						<u-icon name="arrow-right" color="#2979ff" size="28"></u-icon>
						<!-- </u-upload> -->
					</template>
				</view>
			</view>

			<view class="avaarea" @click="showsex=true">
				<view class="textava">
					性别
					<text>
						{{sex}}
					</text>
				</view>
				<u-icon name="arrow-right" color="#2979ff" size="28"></u-icon>
			</view>

			<view class="avaarea" @click="showbirthday=true">
				<view class="textava">
					生日
					<text>
						{{bir}}
					</text>
				</view>
				<u-icon name="arrow-right" color="#2979ff" size="28"></u-icon>
			</view>

			<view class="avaarea" @click="showrealname=true">
				<view class="textava">
					真实姓名
					<text>
						{{realname}}
					</text>
				</view>
				<u-icon name="arrow-right" color="#2979ff" size="28"></u-icon>
			</view>

			<u-popup :show="showname" mode="center" @close="close" @open="open" closeable="true">
				<view class="input">
					<view class="textinput">
						<view class="input_name">
							<u--input placeholder="请输入内容" border="surround" v-model="nickName" @change="changename">
							</u--input>
						</view>

						<view class="button_name">
							<u-button text="保存" type="primary" @click="close"></u-button>
						</view>

					</view>
				</view>
			</u-popup>

			<u-popup :show="showgxqm" mode="center" @close="close" @open="open" closeable="true">
				<view class="input">
					<view class="textinput">

						<view class="input_name">
							<u--input placeholder="请输入个性签名" border="surround" v-model="signature"
								@change="changesignature"></u--input>
						</view>

						<view class="button_name">
							<u-button text="保存" type="primary" @click="close"></u-button>
						</view>

					</view>
				</view>
			</u-popup>

			<u-popup :show="showphone" mode="center" @close="close" @open="open" closeable="true">
				<view class="input">
					<view class="textinput">

						<view class="input_name">
							<u--input placeholder="请输入电话号" border="surround" v-model="phonenum"
								@change="changephonenum"></u--input>
						</view>

						<view class="button_name">
							<u-button text="保存" type="primary" @click="close"></u-button>
						</view>

					</view>
				</view>
			</u-popup>

			<u-popup :show="showemail" mode="center" @close="close" @open="open" closeable="true">
				<view class="input">
					<view class="textinput">

						<view class="input_name">
							<u--input placeholder="请输入邮箱地址" border="surround" v-model="email" @change="changeemail">
							</u--input>
						</view>

						<view class="button_name">
							<u-button text="保存" type="primary" @click="close"></u-button>
						</view>

					</view>
				</view>
			</u-popup>

			<u-popup :show="showrealname" mode="center" @close="close" @open="open" closeable="true">
				<view class="input">
					<view class="textinput">

						<view class="input_name">
							<u--input placeholder="请输入姓名" border="surround" v-model="realname" @change="changerealname">
							</u--input>
						</view>

						<view class="button_name">
							<u-button text="保存" type="primary" @click="close"></u-button>
						</view>

					</view>
				</view>
			</u-popup>

			<u-picker :show="showsex" :columns="columns" closeOnClickOverlay="true" @cancel="closesex"
				@confirm="confirm"></u-picker>

			<u-datetime-picker :show="showbirthday" :value="value1" mode="date" :minDate="7524800000"
				:maxDate="1666778555000" closeOnClickOverlay="true" @close="closebir" @confirm="confirmtoo"
				@cancel="close"></u-datetime-picker>

		</view>
		
		<view class="buyframe">
			<!-- <view class="buttonbuy">
				<u-button type="primary" text="购买" @click="toOrder"></u-button>
			</view> -->
			<view class="buttoncontact">
				<u-button type="primary" text="保存" @click="submit"></u-button>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fileList2: [],
				showname: false,
				showgxqm: false,
				showsex: false,
				showphone: false,
				showemail: false,
				showbirthday: false,
				showrealname: false,
				value1: '2000-06-12',
				value: '',
				columns: [
					['男', '女']
				],
				srcs: '/static/avatest.jpg',
				userInfo: '',
				valuename: '',
				nickName: '',
				signature: '果蔬王者，保质保量',
				phonenum: '13044745634',
				email: '27543698@qq.com',
				sex: '',
				bir: '2000-06-12',
				realname: '李Jack',
				openid:null,
			}
		},
		onLoad(options) {

			this.userInfo = JSON.parse(decodeURIComponent(options.userInfo));
			console.log(this.userInfo);
			this.srcs = this.userInfo.avatarUrl;
			this.nickName = this.userInfo.nickName;

			if (this.userInfo.gender === 0) {
				this.sex = "女";
			} else {
				this.sex = "男"
			}

		},
		mounted(){
			uni.getStorage({
				key:'user',
				success:(res) => {
					let _this=this;
					_this.openId = res.data.openId
				},
			})
		},
		methods: {
			submit(){
				console.log("birthDay:",this.bir);
				console.log("userName:",this.nickName);
				console.log("headImg:",this.srcs);
				console.log("userIntroduce:",this.signature);
				console.log("phoneNumber:",this.phonenum);
				console.log("email:",this.email);
				console.log("realName:",this.realname);
				console.log("sex:",this.sex);
				console.log("openId:",this.openId);
				var sex;
				if(this.sex=='女'){
					sex=0;
					console.log(0);
				}
				else{
					sex=1;
					console.log(1);
				}
				var _this=this;
						this.$axios({
							method:'POST',
							url:'/user/update',
							data:{
								birthDay:_this.bir,
								openId:_this.openId,
								userName:_this.nickName,
								headImg:_this.srcs,
								userIntroduce:_this.signature,
								phoneNumber:_this.phonenum,
								email:_this.email,
								realName:_this.realname,
								sex:sex
							}
						}).then(
							res =>{
								console.log(res.data);
								uni.navigateTo({
									url:'/pages/Me/Melogin'
								})
							}
						).catch(
							err=>{
								console.log(err);
							}
						)
				
			},
			confirm(e) {
				console.log(e.value.Date);
				this.sex = e.value;
				this.showsex = false
			},
			confirmtoo(e) {
				const moment = require('moment');
				console.log(e.value);
				var date = new Date(e.value);
				this.bir = moment(date).format("yyyy-MM-DD");
				console.log(this.bir);
				//console.log(moment(date).format("yyyy-MM-DD"));
				this.showbirthday = false
			},
			open() {
				// console.log('open');
			},
			close() {

				this.showname = false;
				this.showgxqm = false;

				this.showphone = false;
				this.showemail = false;
				this.showbirthday = false;
				this.showrealname = false;
				// console.log('close');
			},
			closesex() {
				this.showsex = false;
				console.log(this.showsex);
			},
			closebir() {
				this.showbirthday = false;
			},
			getAva() {
				let that = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'], //指定压缩图
					success: function(res) {
						console.log(res.tempFilePaths[0])
						let path = res.tempFilePaths[0]
						uniCloud.uploadFile({
							filePath: path,
							cloudPath: Date.now() + '.png',
							onUploadProgress: function(progressEvent) {
								console.log(progressEvent);
							},
							success: function(res) {
								console.log(res)
								uni.showToast({
									icon: 'none',
									title: '上传成功',
									duration: 1500
								})
								let purl = res.fileID;
								uniCloud.getTempFileURL({
									fileList: [purl],
									success: function(res) {
										console.log("地址：" + res.fileList[0]
											.tempFileURL);
										that.srcs = res.fileList[0].tempFileURL;
										console.log("头像:" + that.srcs);
									}
								})
							},

						})

					}
				})
			},
			
			changename() {
				console.log(this.nickName);
			},
			changerealname() {
				console.log(this.realname);
			},
			changesignature() {
				console.log(this.signature);
			},
			changephonenum() {
				console.log(this.phonenum);
			},
			changeemail() {
				console.log(this.email);
			}

		},
	}
</script>

<style lang="scss" scoped>
	.buyframe{
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 150upx;
		background-color: #FFFFFF;
		// border-radius: 1px;
		border-left: none;
		border-right: none;
		border-bottom: none;
		// border-style: solid;
		border-top: #eeeeef 1upx solid;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		border-top-right-radius: 15upx;
		border-top-left-radius: 15upx;
		display: flex;
		justify-content: space-around;
		
		.buttoncontact{
			margin-top: 4%;
			width: 40%;
		}
	}
	.intput {
		padding: 20upx;
	}

	.button_name {
		width: 200upx;
		margin-left: 80upx;
		margin-top: 40upx;
	}

	.input_name {
		border: 1upx solid #3B3532;
		margin-top: 80upx;
		margin-left: 20upx;
		margin-right: 20upx;
	}

	.persondata {
		font-family: "Hiragino Sans GB", "PingFang SC";
		height: 100%;

		.body {
			width: 100%;
			background-color: #eeeeef;
			overflow: hidden;
			height: 1400upx;

			.avaarea {
				margin-top: 20upx;
				width: 90%;
				margin-left: 5%;
				height: 140upx;
				background-color: #ffffff;
				border-radius: 20upx;
				display: flex;
				align-items: center;
				flex-wrap: nowrap;
				border: 1upx solid lightgray;
				box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);

				.uploadarea {}

				.avaimg {
					margin-left: 58%;
				}

				.avaphoto {
					width: 80upx;
					height: 80upx;
				}

				.textavaimg {
					font-size: 34upx;
					margin-left: 30upx;
					font-weight: 800;

				}

				.textava {
					font-size: 34upx;
					margin-left: 30upx;
					font-weight: 800;
					width: 80%;
					// background-color: #3B3532;
					display: flex;
					justify-content: space-between;

					.textgxqm {

						width: 300upx;
						display: inline-block;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
			}
		}
	}
</style>
